<template>
  <div class="lesson">
    <!-- 搜索 -->
    <course-search :hot="hotList" @func="getSearchName" @reset="resetSearch"/>

    <!-- 导航 -->
    <!-- 一级分类 -->
    <div class="course-nav">
      <dl class="m-center">
        <dt>{{ `方向` }}：</dt>
        <dd v-for="(parent,index) in parentList"
            :key="index"
            :class="{active: index === currentParentIndex}"
            @click="handleParentClick(parent,index)"
        >
          {{ parent.name }}
        </dd>
      </dl>
    </div>

    <!-- 二级分类 -->
    <div class="course-nav">
      <dl class="m-center">
        <dt>{{ `分类` }}：</dt>
        <dd v-for="(category,index) in categoryList"
            :key="index"
            :class="{active: index === currentCategoryIndex}"
            @click="handleCategoryClick(category,index)"
        >
          {{ category.name }}
        </dd>
      </dl>
    </div>

    <!-- 难度 -->
    <div class="course-nav">
      <dl class="m-center">
        <dt>{{ `难度` }}：</dt>
        <dd v-for="(level,index) in levelList"
            :key="index"
            :class="{active: index === currentLevelIndex}"
            @click="handleLevelClick(level,index)"
        >
          {{ level.name }}
        </dd>
      </dl>
    </div>

    <!-- 排序 -->
    <div class="course-nav">
      <dl class="m-center">
        <dt>{{ `排序` }}：</dt>
        <dd v-for="(sort,index) in sortList"
            :key="index"
            :class="{active: index === currentSortIndex}"
            @click="handleSortClick(sort,index)"
        >
          {{ sort.name }}
        </dd>
      </dl>
    </div>

    <!-- 列表 -->
    <course-list :list.sync="courseList" />

    <!-- 分页 -->
    <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getCourseListData"
    />

  </div>
</template>
<script>
import CourseSearch from './course-search.vue'
import CourseList from './course-list.vue'
import { getCategoryList, getParentList } from '@/api/category'
import { getCoursePageList } from '@/api/course'

export default {
  data () {
    return {
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 12, // 每页记录数
      // 热词列表
      hotList: ["毕设", "SpringCloud", "SpringBoot", "Docker", "Vue.js", "Python", "GO语言", "小程序"],
      // 一级分类列表
      parentList: [],
      // 二级分类列表
      categoryList:[],
      // 难度分类列表
      levelList:[
        {name: '不限', value: ''},
        {name: '入门', value: '0'},
        {name: '初级', value: '1'},
        {name: '中级', value: '2'},
        {name: '高级', value: '3'}],
      // 排序列表
      sortList:[
        {name: '默认', value: ''},
        {name: '最新', value: 'new'},
        {name: '最热', value: 'hot'}],
      // 搜索参数
      queryParams:{
        name: '',
        price: '0',
        parent: '',
        category: '',
        level: '',
        sort: ''
      },

      currentParentIndex: 0, // 一级分类当前索引
      currentCategoryIndex: 0, // 二级分类当前索引
      currentLevelIndex: 0, // 难度当前索引
      currentSortIndex: 0, // 排序当前索引
      params: {}, // 获取列表参数
      total: 100, // 课程总页数
      courseList: [], // 课程列表
    }
  },
  created () {
    this.getParent()
    this.getCategory()
    this.routerQuery()
  },
  methods: {

    // 路由参数跳转
    routerQuery(){
      if (this.$route.query.name){
        this.getSearchName(this.$route.query.name)
      }
      else {
        this.fetchData()
      }
    },

    // 一级分类点击事件
    handleParentClick(parent,index){

      //如果点击同样的一级分类
      if (this.currentParentIndex === index) return;

      //如果点击的为全部
      if (parent.name === '全部'){
        this.queryParams.parent = ''
      }

      this.currentParentIndex = index

      this.queryParams.parent = parent.id
      this.fetchData()
    },

    // 二级分类点击事件
    handleCategoryClick(category,index){

      //如果点击同样的二级分类
      if (this.currentCategoryIndex === index) return;

      this.currentCategoryIndex = index

      //如果点击的为全部
      if (category.name === '全部'){
        this.queryParams.category = ''
      }

      //如果一级分类已选择
      if (this.currentParentIndex !== 0){
        this.queryParams.category = ''
        this.currentCategoryIndex = 0
        return
      }

      this.queryParams.category = category.id
      this.fetchData()
    },

    // 难度点击事件
    handleLevelClick(level,index){

      //如果点击同样难度
      if (this.currentLevelIndex === index) return;

      this.currentLevelIndex= index
      this.queryParams.level = level.value
      this.fetchData()
    },

    // 排序点击事件
    handleSortClick(sort,index){

      //如果点击同样的排序
      if (this.currentSortIndex === index) return;

      this.currentSortIndex = index
      this.queryParams.sort = sort.value
      this.fetchData()
    },

    // 获取子组件搜索课程名
    getSearchName(data){
      this.queryParams.name = data
      this.fetchData()
    },

    // 获取一级分类数据
    getParent () {
      getParentList().then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.parentList = data.items
          this.parentList.unshift({name: '不限',id: ''})
        }
      })
    },

    // 获取二级分类数据
    getCategory () {
      getCategoryList().then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.categoryList = data.items
          this.categoryList.unshift({name: '不限',id: ''})
        }
      })
    },

    // 获取课程列表数据
    getCourseListData (page = 1) {
      // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
      // 解决分页无效问题
      this.page = page
      getCoursePageList(this.page, this.limit, this.queryParams).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.courseList = data.rows
          this.total = data.total
        }
      })
    },

    //重置搜索
    resetSearch(){
      this.queryParams.name = ''
      this.queryParams.parent = ''
      this.queryParams.category = ''
      this.queryParams.sort = ''
      this.queryParams.level = ''
      this.currentParentIndex = 0
      this.currentSortIndex = 0
      this.currentCategoryIndex = 0
      this.currentLevelIndex = 0
      this.fetchData()
    },

    //刷新数据
    fetchData(){
      this.getCourseListData()
    }
  },
  components: {
    CourseSearch,
    CourseList,
  }
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  dl
    position: relative;
    padding: 16px 0 10px 52px;
    border-bottom: 1px solid $border-three-color;
    font-size: 14px;
  dt
    position: absolute;
    left: 0px;
    top: 24px;
    color: $font-first-color;
    font-weight: 700;
  dd
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px 10px 10px;
    height: 30px;
    line-height: 30px;
    color: $font-first-color;
    cursor: pointer;
    &:hover
      color: $theme-orange-dark-color;
      background-color: rgba(204,136,0,.1);
    &.active
      color: $theme-orange-dark-color;
      background-color: rgba(204,136,0,.1);
</style>

